<div class="login">
  <canvas id="login-canvas"></canvas>
  <div class="login-box">
    <h1 class="login-box-header">
      <a href="#">
        <img src="https://gw.alipayobjects.com/zos/rmsportal/NGCCBOENpgTXpBWUIPnI.svg">
        <span>配置管理系统</span>
      </a>
    </h1>
    <div class="login-box-nav">
      <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
        <div nz-form-item>
          <div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
            <nz-input formControlName="userName" [nzPlaceHolder]="'帐号'" [nzSize]="'large'">
              <ng-template #prefix>
                <i class="anticon anticon-user"></i>
              </ng-template>
            </nz-input>
            <div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">请输入用户名！</div>
          </div>
        </div>
        <div nz-form-item>
          <div nz-form-control [nzValidateStatus]="validateForm.controls.password">
            <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'密码'" [nzSize]="'large'">
              <ng-template #prefix>
                <i class="anticon anticon-lock"></i>
              </ng-template>
            </nz-input>
            <div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">请输入密码！</div>
          </div>
        </div>
        <div nz-form-item>
          <div nz-form-control>
            <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="isLoading">登录</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>